<template>
	<view class="confirm-popup">
    <view class="confirm-wrap">
      <view class="top">
        <image src="../../../../static/images/grab/icon.png" class="icon"></image>        
      </view>
      <view class="bottom">
        The order is submitted successfully, the income and principal have been transferred to your personal account.Which can be checked in the order details.
      </view>
      <view class="btn-wrap">
				<view class="btn" @click="$emit('cancel',$event)">OK</view>
      </view>
	  </view>
	</view>
</template>

<script></script>

<style lang="less">
  .confirm-popup{
		position: fixed;
		top:0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		display: flex;
		align-items: center;	
		justify-content: center;
		.confirm-wrap{
			width: 560rpx;	
			border-radius: 32rpx;
      background: #fff;
    }
    .top{       
      position: relative; 
      height: 190rpx;
      border-radius: 32rpx 32rpx 0 0;
      background: linear-gradient(180deg, #F53D49 0%, #FF7C4D 100%);
      .icon{
        width: 180rpx;
        height: 180rpx;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        left: 50%;
        top: -50rpx;
        transform: translateX(-50%);       
      }
    }
    .bottom{
      padding: 30rpx 35rpx 50rpx 35rpx;      
      font-size: 24rpx;         
      line-height: 40rpx;
      color: #1E1E1F;      
    }
  }
  	.btn-wrap{
			display: flex;
			align-items: center;	
			justify-content: center;
			padding: 30rpx;
			box-sizing: border-box;
			.btn{
				width: 240rpx;			
				height: 70rpx;
				background: #F53D46;
				border-radius: 12rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				color:#fff;
			}
		}
</style>
